<template>
  <div class="rounded-t-32rpx bg-hex-FFFFFF">
    <div class="box-border w-100% flex justify-between px-32rpx py-32rpx">
      <div class="text-28rpx" @tap="datePickerCancel">
        取消
      </div>
      <div class="text-28rpx text-hex-333333">
        日期选择
      </div>
      <div class="text-28rpx text-hex-abcd04" @tap="datePickerConfirm">
        确定
      </div>
    </div>
    <picker-view class="h-388rpx" :value="defaultValue"
                 :indicator-style="indicatorStyle"
                 @change="datePickerChange">
      <picker-view-column>
        <div v-for="(item, index) in datePickerObj.yearArr" :key="index"
             class="popup-view-item">{{ item }}年
        </div>
      </picker-view-column>
      <picker-view-column>
        <div v-for="(item, index) in datePickerObj.monthArr" :key="index"
             class="popup-view-item">{{ item }}月
        </div>
      </picker-view-column>
      <picker-view-column>
        <div v-for="(item, index) in datePickerObj.dayArr" :key="index"
             class="popup-view-item">{{ item }}日
        </div>
      </picker-view-column>
    </picker-view>
  </div>
</template>

<script setup lang="ts">
const emits = defineEmits(['close', 'datePickerConfirm'])
let curDate = new Date()
let datePickerObj: any = $ref({
  yearArr: [],
  monthArr: [],
  dayArr: [],
  curYear: curDate.getFullYear(),
  curMonth: curDate.getMonth() + 1,
  curDay: curDate.getDate(),
})
let defaultValue: any = $ref('')
for (let i = 1900; i <= curDate.getFullYear(); i++) {
  datePickerObj.yearArr.push(i)
}

for (let i = 1; i <= 12; i++) {
  datePickerObj.monthArr.push(i)
}

for (let i = 1; i <= 31; i++) {
  datePickerObj.dayArr.push(i)
}

let indicatorStyle = $ref(`height: ${Math.round(uni.getSystemInfoSync()
                    .screenWidth / (750 / 100))}px;`)
let dateObj: any = $ref({
  nian: '',
  yue: '',
  ri: '',
})

onLoad((options) => {
  defaultValue = [datePickerObj.yearArr[datePickerObj.yearArr.length - 1], datePickerObj.curMonth - 1, datePickerObj.curDay - 1]
})

const datePickerChange = (e) => {
  let cMonth
  let cYear
  // console.log(e)
  let val = e.detail.value
  cYear = datePickerObj.yearArr[val[0]]
  cMonth = datePickerObj.monthArr[val[1]]
  datePickerObj.curDay = datePickerObj.dayArr[val[2]]
  datePickerObj.curMonth = cMonth
  datePickerObj.curYear = cYear
  datePickerObj.dayArr = []
  if (cMonth) {
    if (cMonth === 1 || cMonth === 3 || cMonth === 5 || cMonth === 7
                        || cMonth === 8 || cMonth === 10 || cMonth === 12) {
      for (let i = 1; i <= 31; i++) {
        datePickerObj.dayArr.push(i)
      }
    } else if (cMonth === 4 || cMonth === 6 || cMonth === 11 || cMonth === 9) {
      for (let i = 1; i <= 30; i++) {
        datePickerObj.dayArr.push(i)
      }

    } else if (cMonth === 2) {
      if (datePickerObj.curYear % 4 === 0
                            && (datePickerObj.curYear % 100 !== 0
                                || datePickerObj.curYear % 400 === 0)) {
        for (let i = 1; i <= 29; i++) {
          datePickerObj.dayArr.push(i)
        }
      } else {
        for (let i = 1; i <= 28; i++) {
          datePickerObj.dayArr.push(i)
        }
      }
    }

  }
}
const datePickerCancel = () => {
  emits('close')
}
const datePickerConfirm = () => {
  dateObj.nian = datePickerObj.curYear
  dateObj.yue = datePickerObj.curMonth
  dateObj.ri = datePickerObj.curDay
  emits('datePickerConfirm', dateObj)
}


</script>

<style scoped lang="scss">
    .popup-view-item {
      line-height: 84rpx;
      font-size: 32rpx;
      text-align: center;
    }
</style>
